<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Commuter Connect: Reported Issue</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/common.css" rel="stylesheet">
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      * { box-sizing: border-box; }
      #topBanner {
      }
      #content {
        width: 700px;
      }
      #report {
        width: 100%;
        position: relative;
        padding-left: 2em;
        padding-right: 2em;
      }
      #reportImage {
      }
      #map_canvas {
        position: absolute;
        left: 100%;
        top: 75px;
        border: solid thin black;
      }
      #reportSubject {
        font-weight: bold;
      }
      #reportImage {
        display:block;
      }
      .comment {
        width: 100%;
        clear: both;
        margin: .5ex;
        padding: .5ex;
        padding-top: 1.5em;
        border: solid thin gray;
        position: relative;
      }
      .comment .author {
        position: absolute;
        left: 5px;
        top: 0;
        font-size: x-small;
      }
      .comment .date {
        position: absolute;
        right: 5px;
        top: 0;
        font-size: x-small;
      }
      #comments {
        display: block;
        width: 40em;
        margin-left: 20px;
      }
      #newComment {
        width: 100%;
        display: block;
      }
      #postComment {
        width: 10em;
        float: right;
      }
      .commentHeader {
        position: relative;
        top: -2em;
        margin: 0;
        padding: 0;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"> </script>
  </head>
  <body>
    <h3 id="topBanner">
      <div class="logo">
        <div class="line1">Commuters</div>
        <div class="line2">Connect</div>
      </div>
    </h3>
    <div id="content" class="lift:ShowReport">
      <div id="report">
        <div id="map_canvas"></div>
        <div id="reportSubject">Subject of report.</div>
        <div id="reportedDate">Some Date</div>
        <div id="reportStatus">Status of Report</div>
        <img id="reportImage" alt="Image uploaded by user." />
        <div id="reportText">Text of report.</div>
      </div>
      <hr/>
      <h3 class="commentHeader">Comments</h3>
      <div id="comments">
        <div class="lift:msgs?showAll=true"></div>
        <form method="post" class="lift:form.ajax">
          <textarea id="newComment" placeholder="Comment"></textarea>
          <input type="submit" class="btn btn-primary" id="postComment" value="Post"/>
          <input type="submit" class="btn btn-primary" id="changeStatus" value="Close"/>
        </form>
        <div class="comment">
          <div class="author">User</div>
          <div class="date">Date of Post</div>
          <div class="text">A user submitted comment.</div>
        </div>
        <div class="comment mockup">
          <div class="author">User</div>
          <div class="date">Date of Post</div>
          A user submitted comment.<br/><br/>With multiple paragraphs.
        </div>
        <div class="comment mockup">
          <div class="author">User</div>
          <div class="date">Date of Post</div>
          A user submitted comment that goes on for quite a while,
          though amusingly never actually ends a sentance or manages to
          add anything meaningful.
        </div>
        <div class="comment mockup">
          <div class="author">User</div>
          <div class="date">Date of Post</div>
          A user submitted comment.
        </div>
        <div class="comment mockup">
          <div class="author">User</div>
          <div class="date">Date of Post</div>
          A user submitted comment.
        </div>
        <div class="comment mockup">
          <div class="author">User</div>
          <div class="date">Date of Post</div>
          A user submitted comment.
        </div>
      </div>
    </div>
  </body>
</html>
